<template>
  <div style="background-color: white">
    <el-tag size="medium" style="height: 42px;margin-left: 10px;margin-top: 15px;" type="danger">资产归还</el-tag>
<!--    分割线-->
<!--    <div class="static-content-item" style="margin-top: -10px">-->
<!--      <el-divider direction="horizontal"></el-divider>-->
<!--    </div>-->
<!--    图标按钮-->
    <div style="float: right;margin-right: 90px;margin-top: 7px">
      <div >
        <!--            添加资产送修申请-->
        <el-button type="primary" plain @click="shenq">申请归还</el-button>
<!--     点击按钮进入资产归还申请表单   -->
        <el-dialog
            v-model="dialogVisible"
            :before-close="handleClose"
            title="归还"
            width="60%"
        >
<!--         对话框内容放置处-->
          <div>
            <el-table :data="tableData2"  :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"  style="width: 100%">
              <el-table-column label="编号" prop="id" width="80" />
              <!--          <el-table-column label="流程编号" prop="" > </el-table-column>-->
              <el-table-column label="使用人" prop="empName" width="100"></el-table-column>
              <el-table-column label="使用部门" prop="deptName" width="100"></el-table-column>
              <el-table-column label="物品编号" prop="code" width="100"></el-table-column>
              <el-table-column label="物品名称" prop="gsname" width="100"> </el-table-column>
              <el-table-column label="物品规格" prop="spec" width="100"> </el-table-column>
              <el-table-column label="归还数量" >
                <template #default="s">
                  <el-input-number v-model="s.row.num" :min="1" :max="s.row.max"/>
                </template>
              </el-table-column>
              <el-table-column label="物品价值" prop="unitPrice" width="100px">
                <template #default="e">
                  <i class="el-icon-time"></i>
                  <span>{{ e.row.unitPrice*e.row.num}}</span> 元
                </template>
              </el-table-column>
              <el-table-column label="物品类别" prop="gsClassify.name" width="100"> </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                  <el-button
                      @click.prevent="deleteRow(scope.$index, tableData2)"
                      type="text"
                      size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="toggleSelection()">取消归还</el-button>
              <el-button type="primary" @click="guihuan">确定归还</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
    <!--分割线-->
    <div class="static-content-item" >
      <el-divider direction="horizontal"></el-divider>
    </div>
<!--个人物品信息展示-->
    <div style="height: 560px">
      <el-table
          :data="tableData"
          ref="multipleTable"
          :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="编号" prop="gpdId" width="55" v-if="show" type="index"/>
<!--        <el-table-column label="流程编号" prop="" > </el-table-column>-->
        <el-table-column label="使用人">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top">
              <template #default>
                <p>姓名: {{ scope.row.empName }}</p>
                <p>所在部门: {{ scope.row.deptName }}</p>
              </template>
              <template #reference>
                <div class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.empName }}</el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="物品名称" prop="gsname"/>
        <el-table-column label="物品规格" prop="spec"/>
        <el-table-column label="申请数量" prop="num"/>
        <el-table-column label="物品单价">
          <template #default="e">
            <i class="el-icon-time"></i>
            <span>{{ e.row.unitPrice}}</span> 元
          </template>
        </el-table-column>
<!--        <el-table-column label="物品类别" prop="name"/>-->
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance
}
  from 'vue'
import {addGsRestoreRecord, selectMyGsPy} from "../../../network/adm/MyProperty";
export default defineComponent({
  data() {
    return {
      show:true,
      tableData: [],
      //
      multipleSelection: [],
      tableData2:[],
      dialogVisible: false,
    }
  },
  methods: {
    //查询物品
    selectAll(){
      let params={
        userId:this.$store.state.loginUser.id,
      }
      selectMyGsPy(params).then(data=>{
        this.tableData=data.data;

        console.log('表内容',this.tableData)
      })
    },
    //申请按钮
    shenq(){
      this.dialogVisible=true;
      let gsList = [];
      this.multipleSelection.forEach(e=>{
        let obj = this.$utils.clone(e);
        // console.log('e.gsPyDetail.num',e.gsPyDetail.num)
        obj.max = e.num;
        gsList.push(obj);
      })
      this.tableData2 = gsList;
      console.log('要归还的物品：',this.tableData2)
    },
    guihuan(){
      let restoreRecords = [];
      console.log('this.tableData2',this.tableData2);
      let i="sadasd"
      console.log(i)
      this.tableData2.forEach(e=>{
        let record = {
          gsPyId: e.id,
          code: e.code,
          num: e.num,
          empId: this.$store.state.loginUser.id,
          empName: this.$store.state.loginUser.empName
        }
        restoreRecords.push(record);

      })
      addGsRestoreRecord(restoreRecords).then(data=>{
        this.$response.handle({
          data:data,
          success: '归还成功',
          error: '归还失败',
          successFn:()=>{
            this.dialogVisible=false


          }
        })
      })
    },
    //取消归还时清空复选框
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
      this.dialogVisible=false
    },

    //对话的删除事件
    deleteRow(index, rows) {
      rows.splice(index, 1)

    },
    //表格中点击方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
    },
  },
  created() {
    this.selectAll();
  },
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        date41728: null,
        select38347: "",
        textarea94492: "",
      },
      rules: {},
      select38347Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    }
    const resetForm = () => {
      instance.ctx.$refs['vForm'].resetFields()
    }
    return {
      ...toRefs(state),
      submitForm,
      resetForm
    }
  }
})
</script>


<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

</style>